<template>
  <div class="content">
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">数据查询</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><div class="div2">产品数据</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="query">
      <div class="title">
        <span
          :style="{ color: active === 1 ? '' : '#000' }"
          @click="selectQuery(1)"
          >查询商品</span
        >
        <span
          :style="{ color: active === 2 ? '' : '#000' }"
          @click="selectQuery(2)"
          >查询赠品</span
        >
      </div>
      <el-form ref="form" :model="queryForm" label-width="80px">
        <el-form-item class="formItem" label="产品名称">
          <el-input
            placeholder="请输入产品名称"
            v-model="queryForm.info"
          ></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="选择品牌">
          <el-select
            clearable
            v-model="queryForm.service"
            placeholder="请选择品牌"
            filterable
            default-first-option
          >
            <el-option
              v-for="item in brand"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="formItem" label="商品厂家">
          <el-input
            placeholder="请输入商品厂家"
            v-model="queryForm.orderId"
          ></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="商品仓库">
          <el-select
            clearable
            v-model="queryForm.ware"
            placeholder="请选择商品仓库"
            filterable
            default-first-option
          >
            <el-option
              v-for="item in wareData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-button
          style="margin-left: 10px"
          size="mini"
          type="primary"
          @click="query"
          >搜索商品</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="mini"
          type="warning"
          @click="onReset"
          >重置</el-button
        >
      </el-form>
    </div>
    <div class="context">
      <el-table
        :data="tableData.list"
        style="width: 100%"
        :header-cell-style="{ color: '#2E7EDF' }"
      >
        <el-table-column prop="image" label="商品图片" width="180">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="img(scope.row.image)"
              fit="fit"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="brandName" label="商品品牌"> </el-table-column>
        <el-table-column prop="sellPrice" label="商品单价"> </el-table-column>
        <el-table-column prop="ranking" label="出库排行"> </el-table-column>
        <el-table-column prop="outNumber" label="出库总数"> </el-table-column>
        <el-table-column prop="price" label="出库总额"> </el-table-column>
        <el-table-column label="仓库数量" min-width="150px">
          <template slot-scope="scope">
            <div v-for="item of scope.row.warehouses" :key="item.comId">
              {{ item.warName + ": " + item.number }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="quantityStock" label="总库存"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="onSubmit(scope.row)"
              >查看详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" v-if="tableData.totalNum > 1">
      <div class="block">
        <el-pagination
          @size-change="selectPageSize"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-size="pageSize"
          layout="total,sizes,prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :total="!tableData ? 0 : tableData.totalNum"
        >
        </el-pagination>
      </div>
    </div>
    <div style="height: 50px"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      queryForm: {
        info: "",
        date: [],
        ware: "",
      },
      pageSize: 10,
      active: 1,
      height: "500px",
      tableData: {
        list: [],
      },
      brand: [],
      wareData: [],
      currentPage1: 1,
    };
  },
  created () {
    this.getList();
  },
  methods: {
    selectPageSize (e) {
      this.pageSize = e;
      this.getList();
    },
    onReset () {
      this.$set(this.queryForm, "info", "");
      this.$set(this.queryForm, "service", "");
      this.$set(this.queryForm, "orderId", "");
      this.$set(this.queryForm, "ware", "");
      this.getList();
    },
    selectQuery (e) {
      this.active = e;
      this.getList();
    },
    tableHeight () {
      let self = this;
      setTimeout(() => {
        let ph = document.documentElement.clientHeight;
        self.height = ph - 370 + "px";
      }, 2000);
      window.onresize = function () {
        let ph = document.documentElement.clientHeight;
        self.height = ph - 370 + "px";
      };
    },
    query () {
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.getList();
    },
    handleCurrentChange (e) {
      this.currentPage1 = e;
      this.getList();
    },
    getList () {
      this.axios
        .post("/order/comm/commWarehouse/list", {
          pageSize: 999,
          pageNo: 1
        }, {
          headers: { isLoading: false },
        })
        .then((res) => {
          if (res.data.list) {
            this.wareData = res.data.list;
          }
        });
      this.axios
        .get("/order/comm/commodity/selectList", {
          headers: { isLoading: true },
        })
        .then((res) => {
          this.brand = res.data;
        });
      let temp = "";
      if (this.active == 1) {
        temp = "findAllWarCommodity";
      } else {
        temp = "findAllWarComplimentary";
      }
      this.axios
        .post("/order/warehouseCom/" + temp, {
          brandId: this.queryForm.service,
          pageNo: this.currentPage1,
          pageSize: this.pageSize,
          startTime: this.queryForm.date[0],
          endTime: this.queryForm.date[1],
          title: this.queryForm.info,
          warId: this.queryForm.ware,
          vender: this.queryForm.vender,
          type: this.active,
        })
        .then((res) => {
          this.tableData = res.data;
        });
    },
    img (img) {
      return this.ImgHttps + img;
    },
    onSubmit (e) {
      this.$router.push({
        path: "productDataDetails",
        query: {
          cId: e.id,
          warId: -1,
          type: this.active,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 15px;
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }
  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }
  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }
  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
  .div1 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb2.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #2d7edf;
  }
  .div2 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb1.png);
    width: 110px;
    font-size: 13px;
    padding-left: 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }
  .query {
    background: #fff;
    padding: 10px 20px;
    .title {
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
      color: #2d7edf;
      margin-bottom: 10px;
      span {
        margin-right: 20px;
      }
      span:hover {
        color: #1e79e9 !important;
        cursor: pointer;
      }
    }
    .formItem {
      display: inline-block;
      margin-right: 20px;
    }
    /deep/.el-input > input {
      height: 30px;
      width: 150px;
    }
  }
  .context {
    margin-top: 10px;
    padding: 10px 15px;
    background: #fff;
  }
  .page {
    text-align: right;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: -33px;
    background: #eee;
    z-index: 200;
    span {
      font-size: 15px;
      color: #666;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
    }
    .el-pagination {
      display: inline-block;
      vertical-align: middle;
    }
  }
}
</style>
